<template>
  <div class='my-column'>
    <div class="svg-div"></div>
    <h1>随心写作，自由表达</h1>
    <el-row>
      <el-button type="primary" @click="$router.push('/add-article')">开始写文章</el-button>
    </el-row>
    <h2>发现精彩</h2>
    <div class="item">
      <el-row>
        <el-col :span="8" v-for="column in dataList" :key="column.id">
          <columnItem :column="column"></columnItem>
        </el-col>
      </el-row>
    </div>
    <div class="footer" v-if="!isAll">
      <el-button type="primary" plain size="medium" @click="getMoreColumn">{{ isLoading ? "正在加载..." : "加载更多"}}</el-button>
    </div>
  </div>
</template>

<script>
import columnItem from './components/ColumnItem.vue'
import { getColumnList } from '@/api/column'

export default {
  name: 'MyColumn',
  data () {
    return {
      query: {
        currentPage: 1,
        pageSize: 3
      },
      dataList: [],
      total: 0,
      isLoading: false
    }
  },
  components: {
    columnItem
  },
  methods: {
    async getColumnList () {
      const res = await getColumnList(this.query)
      if (res.code === 0) {
        this.dataList = res.data.columns
        this.total = res.data.total
      } else {
        this.$message.error(res.msg)
      }
    },

    async getMoreColumn () {
      this.query.currentPage++
      this.isLoading = true
      const res = await getColumnList(this.query)
      this.isLoading = false
      this.dataList = [...this.dataList, ...res.data.columns]
    }
  },
  computed: {
    isAll () {
      return this.dataList.length === this.total
    }
  },
  created () {
    this.getColumnList()
  },
  mounted () { }
}
</script>

<style lang='less' scoped>
.my-column {
  text-align: center;

  .footer {
    padding: 20px 0 50px 0;

    .el-button {
      width: 300px;
    }
  }
}

.svg-div {
  display: inline-block;
  width: 500px;
  height: 300px;
  background: url('@/assets/banner.svg') no-repeat center / 50%;
}

h1 {
  font-weight: 400;
  font-size: 24px;
}

h2 {
  font-weight: 400;
  font-size: 18px;
  margin: 20px 0;
}
</style>
